<template>
  <div>
    <max-panel title="基础使用：">
      <max-button type="default" @onClick="click" class="button-style">默认状态</max-button>
      <max-button type="disabled" @onClick="click" class="button-style">禁止状态</max-button>
      <max-button type="loading" @onClick="click" class="button-style">加载状态</max-button>
    </max-panel>
    <max-panel title="内置颜色：">
      <max-button type="default" color="success" @onClick="click" block>内置-Success样式</max-button>
      <max-button type="default" color="info" @onClick="click" block>内置-Info样式</max-button>
      <max-button type="default" color="warning" @onClick="click" block>内置-Warning样式</max-button>
      <max-button type="default" color="danger" @onClick="click" block>内置-Danger样式</max-button>
    </max-panel>
    <max-panel title="自定义颜色：">
      <max-button type="default" :theme="custom" @onClick="click" block>自定义样式</max-button>
    </max-panel>
  </div>
</template>

<script>

import {defineComponent, nextTick, ref, reactive} from "vue";

export default defineComponent({
  setup() {
    /**
     * 变量列表：
     */
    const custom = reactive({
      '--firstColor': '#001529',
      '--secondColor': '#003966',
      '--thirdColor': '#0074cc',
      '--fontColor': '#fff',
      '--backGroundColor': 'transparent'
    });
    /**
     * 方法列表：
     * click：点击事件
     */
    const click = (e) => {
      console.log('点击事件:%s', e);
    }

    /**
     * 初始化
     */
    nextTick(() => {
    });

    return {
      custom,
      click
    };
  }
});
</script>

<style scoped>
.button-panel {
  width: 40%;
  margin: 12px;
  padding: 12px 24px;
  border: 1px solid #f0f0f0;
}

.button-style {
  margin-left: 12px;
}
</style>